<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="业务系统" prop="systemName">
            <el-select v-model.trim="filterForm.systemName" placeholder="请选择">
              <el-option
                v-for="(item) in systemList"
                :key="item.systemId"
                :label="item.systemName"
                :value="item.systemName"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <el-button type="primary" @click="handleFilter">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
      <dt-table
        ref="dtTable"
        v-loading="loading"
        :table-opts="tableOpts"
        row-key="id"
        :pagination-data="{
          total: total,
          queryParams: filterForm
        }"
        @pagination="getList"
        @selection-change="selectionChange"
      >
        <template #operatorBtn="{param}">
          <el-button size="small" @click="empower(param)" v-permission="['SYSTEM_MAINTEN_EMPOWER_BUTTON']">授权</el-button>
          <el-button size="small" @click="changeState(param)" v-permission="['SYSTEM_MAINTEN_STATE_BUTTON']">{{ param.state == 1 ? '禁用' : '启用' }}</el-button>
        </template>
      </dt-table>
    </div>
    <merchantTableModel ref="merchantTableModel" />
    <addFormModel ref="addFormModel" @success="getList" />
    <personSelect
      v-if="allocationShow"
      ref="personPicker"
      v-model="personValue"
      :params="params"
      :search-user-params="params"
      :api="bussinessRoleManageApi"
      :selectedData="[]"
      :tag-visible="false"
      :reappear="true"
      :selected-data="select"
      @handleSelectData="selected" />
  </div>
</template>

<script>
import merchantTableModel from './components/merchantTableModel'
import addFormModel from './components/addFormModel'
import { getPage, editSystemState, qrySystemUser, allocationPerson } from '@/api/unifiedPayment/businessSystem'
import { qryUserSystemAuth } from '@/api/unifiedPayment/tradeQuery'
import { getManagingOrgUserList, searchOrgName, searchUserName } from '@/framework/api/authCenter/bussinessRoleManage'
import { getUserListByUserIds } from '@/framework/api/affairManage/flowDetail/Config'
import { getRoleId } from '@/api/videoFusion/upstreamAccess'


export default {
  components: { merchantTableModel, addFormModel },
  dicts: ['upStatus'],
  data() {
    return {
      bussinessRoleManageApi: { getManagingOrgUserList, searchOrgName, searchUserName, getUserListByUserIds },
      params: {
        roleId: ''
      },
      total: 0,
      filterForm: {
        systemName: '',
        pageNo: 1,
        pageSize: 10
      },
      systemList: [],
      merchantOptions: [],
      tableOpts: {
        rowKey: 'systemId',
        toolbarBtn: [
          {
            label: '新增',
            permission: ['SYSTEM_MAINTEN_ADD_BUTTON'],
            type: 'primary',
            click: () => {
              this.handleAdd()
            }
          }
        ],
        tableData: [],
        firstTableCol: {
          select: false
        },
        indexTableCol: {
          index: true
        },
        tableCol: [
          {
            prop: 'systemName',
            label: '业务系统',
            show: true
          },
          {
            prop: 'state',
            label: '状态',
            show: true,
            type: 'dict',
            formatter: (row) => { return this.dict.type.upStatus }
          },
          {
            prop: 'createTime',
            label: '添加时间',
            show: true
          },
          {
            prop: 'merchantNum',
            label: '商户数量',
            show: true,
            formatter: (row) => {
              return !row.merchantNum ? '0' : row.merchantNum
            }
          }
        ],
        operator: {
          width: 260,
          operatorBtn: [
            {
              text: '详情',
              size: 'small',
              permission: ['SYSTEM_MAINTEN_DETAIL_BUTTON'],
              click: (row, col, cellValue) => { return this.viewInfo(row) }
            }
          ]
        }
      },
      loading: false,
      selectLoading: false,
      allocationShow: false,
      select: [],
      personValue: ''
    }
  },
  computed: {
    detailOption() {
      return {
        labelWidth: '140px',
        rows: [
          {
            prop: 'systemName',
            label: '业务系统',
            show: true
          },
          {
            prop: 'sts',
            label: '状态',
            show: true
          },
          {
            prop: 'createTime',
            label: '添加时间',
            show: true
          },
          {
            prop: 'num',
            label: '商户数量',
            show: true
          }
        ],
        data: {}
      }
    }
  },
  mounted() {
    this.refresh()
    getRoleId().then((res) => {
      this.params.roleId = res.data
    })
  },
  methods: {
    selected(select) {
      this.select = select
      const params = {
        systemId: this.selectSystemId
      }
      params.userIds = this.select.map((item) => {
        return item.userId
      })
      allocationPerson(params).then((res) => {
        this.$dtModal.msgSuccess(res.message)
        this.selectSystemId = ''
        this.personValue = ''
        this.allocationShow = false
      })
    },
    empower(row) {
      this.allocationShow = false
      this.selectSystemId = row.systemId
      this.personValue = ''
      if (this.params.roleId) {
        setTimeout(() => {
          this.allocationShow = true
          qrySystemUser(row.systemId).then((res) => {
            this.personValue = res.data.map((item) => {
              return item.userId
            }).join(',')
            setTimeout(() => {
              this.$refs.personPicker.show()
            }, 10)
          })
        }, 10)
      }
    },
    refresh() {
      this.getList()
      qryUserSystemAuth().then((res) => {
        this.systemList = res.data
      })
    },
    changeState(row) {
      editSystemState({
        systemId: row.systemId,
        state: row.state == '1' ? '2' : '1'
      }).then((res) => {
        this.$dtModal.msgSuccess(res.message)
        this.getList()
      })
    },
    selectionChange(val) {
      this.selectionRow = val
    },
    viewInfo(row) {
      this.$refs.merchantTableModel.open(row.systemId)
    },
    handleAdd() {
      this.$refs.addFormModel.open()
    },
    // 搜索
    handleFilter() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.filterFormRef.resetFields('filterForm')
      this.handleFilter()
    },
    // remoteMethod(query) {
    //   if (query !== '') {
    //     this.selectLoading = true
    //     qryMerchantByName(query).then((res) => {
    //       this.selectLoading = false
    //       this.merchantOptions = res.data
    //     })
    //   } else {
    //     this.merchantOptions = []
    //   }
    // },
    getList() {
      this.loading = true
      getPage(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
